<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
	<head>
		<title>温度统计展示图</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript">
			$(document).ready(function() {
				//获取当前时间
				function p(s) {
				    return s < 10 ? '0' + s: s;
				}
				var myDate = new Date();
				//获取当前年
				var year=myDate.getFullYear();
				//获取当前月
				var month=myDate.getMonth()+1;
				//获取当前日
				var dayStart=myDate.getDate()-2;
				var dayEnd=myDate.getDate();  
				
				var h=myDate.getHours();       //获取当前小时数(0-23)
				var m=myDate.getMinutes();     //获取当前分钟数(0-59)
				var s=myDate.getSeconds();  
				var endTime = year+'-'+p(month)+"-"+p(dayEnd)+" "+p(h)+':'+p(m)+":"+p(s);
				
				if(dayStart == 0){
					var nowdays = new Date();
				    var year = nowdays.getFullYear();
				    var month = nowdays.getMonth();
				    if(month==0)
				    {
				        month=12;
				        year=year-1;
				    }
				    if (month < 10) {
				        month = "0" + month;
				    }
				    var myDate = new Date(year, month, 0);
				    dayStart = myDate.getDate();
				}
				
				var dayEnd=myDate.getDate(); 
				var startTime = year+'-'+p(month)+"-"+p(dayStart)+" "+p(h)+':'+p(m)+":"+p(s);
				
				$("#startTime").val(startTime);
				$("#endTime").val(endTime);
				
				showCharts();
				
			});
			
			function showCharts(){
				var sensorMac ='${sensorMac}';
				var startTime = $("#startTime").val();
				var endTime = $("#endTime").val();
				
				if(startTime == endTime || startTime > endTime){
					$.jBox.alert('结束日期不能小于开始日期', '错误');
				}else{
					var load = layer.load(1);
					$.ajax({
						type: "post",
						dataType: "json",
						url: "${ctx}/ccsenhumidata/sensorHumiData/detailChartList",
						data: {"sensorMac":sensorMac, "startTime":startTime, "endTime":endTime},
						timeout: 60000,
						success: function(data){
							layer.close(load);
							if(data.success == "success"){
								//设置当前层级
								if(data.nowLevel != ""){
									$("#nowLevel").html("[" + data.nowLevel + "]");
								}
								
								$("#echartsdiv").show();
								var xAxisTempData = data.xAxisTempData.split(',');
								var seriesTempData = data.seriesTempData.split(',');
								var upperTempData = data.upperTempData.split(',');
								var lowerTempData = data.lowerTempData.split(',');
								
								var myChart = echarts.init(document.getElementById('echartsdiv'));
								option = {
								    title: {
								        text: '温度分布图'
								    },
								    tooltip: {
								        trigger: 'axis',
								        axisPointer: {
								            type: 'cross'
								        }
								    },
								    toolbox: {
								    	show: true,
								    	showTitle: false,
								    	right: '3%',
							        	feature: {
								            dataView: {readOnly: true},
								            magicType: {type: ['line', 'bar', 'point']},
								            restore: {},
								            saveAsImage: {}
								        }
								    },
								    xAxis:  {
								        type: 'category',
								        boundaryGap: false,
								        data: xAxisTempData
								    },
								    yAxis: {
										min: function(value) {
										    return value.min - 4;
										},
								    	max: function(value) {
										    return value.max + 5;
										},
								        type: 'value',
								        axisLabel: {
								            formatter: '{value} ℃'
								        },
								        axisPointer: {
								            snap: true
								        }
								    },
								   
								    series: [
								    	{
								            name:'时间              ',
								            type:'line',
								            smooth: true,
								        },
								        {
								            name:'温度',
								            type:'line',
								            smooth: true,
								            data: seriesTempData,
								            markPoint : {  
					                            data : [  
					                                {type : 'max', name: '最大值'},  
					                                {type : 'min', name: '最小值'}  
					                            ]
					                        },  
								            markLine : {  
					                            data : [  
					                                {type : 'average', name: '平均值'}  
					                            ]  
					                        },
					                        itemStyle: {
										        normal: {
										            color: "#1E91FF",
										            lineStyle: {
										                color: "#1E91FF"
										            }
										        }
										    }
								        },
								        {
								        	name: '温度上限',
								        	type: 'line',
								        	smooth: true,
								        	symbol: 'none',
								        	data: upperTempData,
								        	itemStyle: {
										        normal: {
										            color: "#FFA500",
										            lineStyle: {
										                color: "#FFA500"
										            }
										        }
										    }
								        },
								        {
								        	name: '温度下限',
								        	type: 'line',
								        	smooth: true,
								        	symbol: 'none',
								        	data: lowerTempData,
								        	itemStyle: {
										        normal: {
										            color: "#2E8B57",
										            lineStyle: {
										                color: "#2E8B57"
										            }
										        }
										    }
								        }
								    ]
								};
								//绑定ECharts参数
								myChart.setOption(option);
							}else{
								//设置当前层级
								if(data.nowLevel != ""){
									$("#nowLevel").html("[" + data.nowLevel + "]");
								}
								$("#echartsdiv").hide();
								$.jBox.alert('所选传感器该时段内无数据!', '提示');
							}
						},
						error:function(a,b,c){
							layer.close(load);
						}
						
					});
				}
				
			}
			
			function closeTree(){
				var openCloseDiv = document.getElementById('openClose'); 
				openCloseDiv.click();
			}
			
		</script>
		<style type="text/css">
			body{
				color: #000000;
				margin: 20px;
			}
			#searchBtn{
				margin-left: 15px;
			}
			#officeContent{
				border: none;
			}
			#nowLevel{
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="right">
			<div class="breadcrumb">
				<tr>
					<!-- 开始和结束时间设置为不可清空 -->
					<td><label style="margin-left: 15px;">开始时间</label></td>
					<td>
				 		<label> <input type="text" id="startTime" class="startTime" style="width: 190px; margin-top: 5px; margin-left: 10px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})" /> </label>
					</td>
					<td><label style="margin-left: 15px;">结束时间</label></td>
					<td>
				 		<label> <input type="text" id="endTime" class="endTime" style="width: 190px; margin-top: 5px; margin-left: 10px;" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})" /> </label>  
					</td>
					<td>
						<label> <input type="submit" id="searchBtn"  class="btn btn-primary" value="查询" style="margin-top: -5px;" onclick="showCharts()"></input> </label>
					</td> 
				</tr>
			</div>
			
			<div id="echartsdiv" style="height: 500px; width: 950px; "></div>
		</div>
	</body>
</html>